﻿<!doctype html>
<!--[if IE 7 ]>		 <html class="no-js ie ie7 lte7 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 8 ]>		 <html class="no-js ie ie8 lte8 lte9" lang="en-US"> <![endif]-->
<!--[if IE 9 ]>		 <html class="no-js ie ie9 lte9>" lang="en-US"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="en-US">
 <!--<![endif]-->
<head data-live-domain="jqueryui.com">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>jQuery UI Demos | jQuery UI</title>

    <meta name="author" content="jQuery Foundation - jquery.org">
    <meta name="description" content="jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.">

    <meta name="viewport" content="width=device-width">

    <link rel="shortcut icon" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/i/favicon.ico">

    <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
    <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">

    <script src="//jqueryui.com/jquery-wp-content/themes/jquery/js/modernizr.custom.2.8.3.min.js"></script>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script src="//jqueryui.com/jquery-wp-content/themes/jquery/js/plugins.js"></script>
    <script src="//jqueryui.com/jquery-wp-content/themes/jquery/js/main.js"></script>

    <script src="//use.typekit.net/wde1aof.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <link rel='https://api.w.org/' href='//jqueryui.com/wp-json/' />
    <meta name="generator" content="WordPress 4.5.2" />
    <link rel="alternate" type="application/json+oembed" href="//jqueryui.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjqueryui.com%2Fdemos%2F" />
    <link rel="alternate" type="text/xml+oembed" href="//jqueryui.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjqueryui.com%2Fdemos%2F&#038;format=xml" />

</head>
<body class="jquery-ui page page-id-19 page-template-default page-slug-demos single-author singular">

    <header>
        <section id="global-nav">
            <nav>
                <div class="constrain">
                    <ul class="projects">
                        <li class="project jquery"><a href="http://jquery.com/" title="jQuery">jQuery</a></li>
                        <li class="project jquery-ui"><a href="http://jqueryui.com/" title="jQuery UI">jQuery UI</a></li>
                        <li class="project jquery-mobile"><a href="http://jquerymobile.com/" title="jQuery Mobile">jQuery Mobile</a></li>
                        <li class="project sizzlejs"><a href="http://sizzlejs.com/" title="Sizzle">Sizzle</a></li>
                        <li class="project qunitjs"><a href="http://qunitjs.com/" title="QUnit">QUnit</a></li>
                    </ul>
                    <ul class="links">
                        <li><a href="http://plugins.jquery.com/">Plugins</a></li>
                        <li class="dropdown">
                            <a href="http://contribute.jquery.org/">Contribute</a>
                            <ul>
                                <li><a href="http://contribute.jquery.org/CLA/">CLA</a></li>
                                <li><a href="http://contribute.jquery.org/style-guide/">Style Guides</a></li>
                                <li><a href="http://contribute.jquery.org/triage/">Bug Triage</a></li>
                                <li><a href="http://contribute.jquery.org/code/">Code</a></li>
                                <li><a href="http://contribute.jquery.org/documentation/">Documentation</a></li>
                                <li><a href="http://contribute.jquery.org/web-sites/">Web Sites</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="http://events.jquery.org/">Events</a>
                            <ul class="wide"></ul>
                        </li>
                        <li class="dropdown">
                            <a href="https://jquery.org/support/">Support</a>
                            <ul>
                                <li><a href="http://learn.jquery.com/">Learning Center</a></li>
                                <li><a href="http://try.jquery.com/">Try jQuery</a></li>
                                <li><a href="http://irc.jquery.org/">IRC/Chat</a></li>
                                <li><a href="http://forum.jquery.com/">Forums</a></li>
                                <li><a href="http://stackoverflow.com/tags/jquery/info">Stack Overflow</a></li>
                                <li><a href="https://jquery.org/support/">Commercial Support</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="https://jquery.org/">jQuery Foundation</a>
                            <ul>
                                <li><a href="https://jquery.org/join/">Join</a></li>
                                <li><a href="https://jquery.org/members/">Members</a></li>
                                <li><a href="https://jquery.org/team/">Team</a></li>
                                <li><a href="https://jquery.org/conduct/">Conduct</a></li>
                                <li><a href="http://brand.jquery.org/">Brand Guide</a></li>
                                <li><a href="https://jquery.org/donate/">Donate</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </section>
    </header>

    <div id="container">
        <div id="logo-events" class="constrain clearfix">
            <h2 class="logo"><a href="/" title="jQuery UI">jQuery UI</a></h2>

            <aside><div id="broadcast"></div></aside>
        </div>

        <nav id="main" class="constrain clearfix">
            <div class="menu-top-container">
                <ul id="menu-top" class="menu">
                    <li class="menu-item current"><a href="http://jqueryui.com/demos/">Demos</a></li>
                    <li class="menu-item"><a href="http://jqueryui.com/download/">Download</a></li>
                    <li class="menu-item"><a href="http://api.jqueryui.com/">API Documentation</a></li>
                    <li class="menu-item"><a href="http://jqueryui.com/themeroller/">Themes</a></li>
                    <li class="menu-item"><a href="http://jqueryui.com/development/">Development</a></li>
                    <li class="menu-item"><a href="http://jqueryui.com/support/">Support</a></li>
                    <li class="menu-item"><a href="http://blog.jqueryui.com/">Blog</a></li>
                    <li class="menu-item"><a href="http://jqueryui.com/about/">About</a></li>
                </ul>
            </div>

            <form method="get" class="searchform" action="//jqueryui.com/">
                <button type="submit" class="icon-search"><span class="visuallyhidden">search</span></button>
                <label>
                    <span class="visuallyhidden">Search jQuery UI</span>
                    <input type="text" name="s" value=""
                           placeholder="Search">
                </label>
            </form>
        </nav>

        <div id="content-wrapper" class="clearfix row">


            <div class="content-right twelve columns">
                <div id="content">
                    <h1 class="entry-title">jQuery UI Demos</h1>
                    <hr>


                    <p>
                        jQuery UI offers a combination of interaction, effects, widgets, utilities,
                        and themes designed to work well together or on their own. Play with the demos,
                        view the source, <a href="/themeroller/">build a theme</a>, read the
                        <a href="http://api.jqueryui.com/">API documentation</a> and start using jQuery
                        UI today.
                    </p>

                    <h2>Interactions</h2>
                    <p>
                        Interactions add basic mouse-based behaviors to any element. You can create
                        sortable lists, resizable elements, drag &amp; drop behaviors and more with just
                        a few lines of code. Interactions also make great building blocks for more complex
                        widgets and applications.
                    </p>

                    <ul><li><a href="http://jqueryui.com/draggable/">Draggable</a></li><li><a href="http://jqueryui.com/droppable/">Droppable</a></li><li><a href="http://jqueryui.com/resizable/">Resizable</a></li><li><a href="http://jqueryui.com/selectable/">Selectable</a></li><li><a href="http://jqueryui.com/sortable/">Sortable</a></li></ul>

                    <h2>Widgets</h2>
                    <p>
                        Widgets are full-featured UI controls that bring the richness of desktop
                        applications to the Web. All widgets provide a solid core with plenty of extension
                        points for customizing behavior, as well as full theming support.
                    </p>

                    <ul><li><a href="http://jqueryui.com/accordion/">Accordion</a></li><li><a href="http://jqueryui.com/autocomplete/">Autocomplete</a></li><li><a href="http://jqueryui.com/button/">Button</a></li><li><a href="http://jqueryui.com/checkboxradio/">Checkboxradio</a></li><li><a href="http://jqueryui.com/controlgroup/">Controlgroup</a></li><li><a href="http://jqueryui.com/datepicker/">Datepicker</a></li><li><a href="http://jqueryui.com/dialog/">Dialog</a></li><li><a href="http://jqueryui.com/menu/">Menu</a></li><li><a href="http://jqueryui.com/progressbar/">Progressbar</a></li><li><a href="http://jqueryui.com/selectmenu/">Selectmenu</a></li><li><a href="http://jqueryui.com/slider/">Slider</a></li><li><a href="http://jqueryui.com/spinner/">Spinner</a></li><li><a href="http://jqueryui.com/tabs/">Tabs</a></li><li><a href="http://jqueryui.com/tooltip/">Tooltip</a></li></ul>

                    <h2>Effects</h2>
                    <p>
                        Effects add support for animating colors and class transitions, as well as
                        providing several additional easings. In addition, a full suite of custom effects
                        are available for use when showing and hiding elements or just to add some visual
                        appeal.
                    </p>
                    <ul>
                        <li><a href="/effect/">Effect</a></li>
                        <li>
                            Visibility
                            <ul>
                                <li><a href="/show/">Show</a></li>
                                <li><a href="/hide/">Hide</a></li>
                                <li><a href="/toggle/">Toggle</a></li>
                            </ul>
                        </li>
                        <li>
                            Class Animation
                            <ul>
                                <li><a href="/addClass/">Add Class</a></li>
                                <li><a href="/removeClass/">Remove Class</a></li>
                                <li><a href="/toggleClass/">Toggle Class</a></li>
                                <li><a href="/switchClass/">Switch Class</a></li>
                            </ul>
                        </li>
                        <li><a href="/animate/">Color Animation</a></li>
                    </ul>

                    <h2>Utilities</h2>
                    <p>Utilities used by jQuery UI to build interactions and widgets.</p>

                    <ul><li><a href="http://jqueryui.com/position/">Position</a></li><li><a href="http://jqueryui.com/widget/">Widget Factory</a></li></ul>
                </div>
                <div id="sidebar" class="widget-area" role="complementary">
                    <aside class="widget">
                        <h3 class="widget-title">Interactions</h3>
                        <ul>
                            <li><a href="http://jqueryui.com/draggable/">Draggable</a></li>
                            <li><a href="http://jqueryui.com/droppable/">Droppable</a></li>
                            <li><a href="http://jqueryui.com/resizable/">Resizable</a></li>
                            <li><a href="http://jqueryui.com/selectable/">Selectable</a></li>
                            <li><a href="http://jqueryui.com/sortable/">Sortable</a></li>
                        </ul>
                    </aside>
                    <aside class="widget">
                        <h3 class="widget-title">Widgets</h3>
                        <ul>
                            <li><a href="http://jqueryui.com/accordion/">Accordion</a></li>
                            <li><a href="http://jqueryui.com/autocomplete/">Autocomplete</a></li>
                            <li><a href="http://jqueryui.com/button/">Button</a></li>
                            <li><a href="http://jqueryui.com/checkboxradio/">Checkboxradio</a></li>
                            <li><a href="http://jqueryui.com/controlgroup/">Controlgroup</a></li>
                            <li><a href="http://jqueryui.com/datepicker/">Datepicker</a></li>
                            <li><a href="http://jqueryui.com/dialog/">Dialog</a></li>
                            <li><a href="http://jqueryui.com/menu/">Menu</a></li>
                            <li><a href="http://jqueryui.com/progressbar/">Progressbar</a></li>
                            <li><a href="http://jqueryui.com/selectmenu/">Selectmenu</a></li>
                            <li><a href="http://jqueryui.com/slider/">Slider</a></li>
                            <li><a href="http://jqueryui.com/spinner/">Spinner</a></li>
                            <li><a href="http://jqueryui.com/tabs/">Tabs</a></li>
                            <li><a href="http://jqueryui.com/tooltip/">Tooltip</a></li>
                        </ul>
                    </aside>
                    <aside class="widget">
                        <h3 class="widget-title">Effects</h3>
                        <ul>
                            <li><a href="http://jqueryui.com/addClass/">Add Class</a></li>
                            <li><a href="http://jqueryui.com/animate/">Color Animation</a></li>
                            <li><a href="http://jqueryui.com/easing/">Easing</a></li>
                            <li><a href="http://jqueryui.com/effect/">Effect</a></li>
                            <li><a href="http://jqueryui.com/hide/">Hide</a></li>
                            <li><a href="http://jqueryui.com/removeClass/">Remove Class</a></li>
                            <li><a href="http://jqueryui.com/show/">Show</a></li>
                            <li><a href="http://jqueryui.com/switchClass/">Switch Class</a></li>
                            <li><a href="http://jqueryui.com/toggle/">Toggle</a></li>
                            <li><a href="http://jqueryui.com/toggleClass/">Toggle Class</a></li>
                        </ul>
                    </aside>
                    <aside class="widget">
                        <h3 class="widget-title">Utilities</h3>
                        <ul>
                            <li><a href="http://jqueryui.com/position/">Position</a></li>
                            <li><a href="http://jqueryui.com/widget/">Widget Factory</a></li>
                        </ul>
                    </aside>
                </div>
            </div>

        </div>
    </div>
    <footer class="clearfix simple">
        <div class="constrain">
            <div class="row">
                <div class="six columns offset-by-three">
                    <h3><span>Books</span></h3>
                    <ul class="books">
                        <li>
                            <a href="http://www.manning.com/vantoll/">
                                <span><img src="//jqueryui.com/jquery-wp-content/themes/jquery/content/books/jquery-ui-in-action.jpg" alt="jQuery UI in Action by TJ VanToll" width="92" height="114"></span>
                                <strong>jQuery UI in Action</strong><br>
                                <cite>TJ VanToll</cite>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.packtpub.com/web-development/jquery-ui-themes-beginners-guide">
                                <img src="//jqueryui.com/jquery-wp-content/themes/jquery/content/books/jquery-ui-themes.jpg" alt="jQuery UI Themes by Adam Boduch" width="92" height="114">
                                <span class="book-title">jQuery UI Themes</span>
                                <cite>Adam Boduch</cite>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.packtpub.com/web-development/jquery-ui-cookbook">
                                <img src="//jqueryui.com/jquery-wp-content/themes/jquery/content/books/jquery-ui-cookbook.jpg" alt="jQuery UI Cookbook by Adam Boduch" width="92" height="114">
                                <span class="book-title">jQuery UI Cookbook</span>
                                <cite>Adam Boduch</cite>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>


            <div id="legal">
                <ul class="footer-site-links">
                    <li><a class="icon-pencil" href="http://learn.jquery.com/">Learning Center</a></li>
                    <li><a class="icon-group" href="http://forum.jquery.com/using-jquery-ui/">Forum</a></li>
                    <li><a class="icon-wrench" href="http://api.jqueryui.com/">API</a></li>
                    <li><a class="icon-twitter" href="https://twitter.com/jqueryui">Twitter</a></li>
                    <li><a class="icon-comments" href="http://irc.jquery.org/">IRC</a></li>
                    <li><a class="icon-github" href="https://github.com/jquery">GitHub</a></li>
                </ul>
                <p class="copyright">
                    Copyright 2016 <a href="https://jquery.org/team/">The jQuery Foundation</a>.
                    <a href="https://jquery.org/license/">jQuery License</a>
                    <span class="sponsor-line"><a href="http://digitalocean.com" rel="nofollow" class="do-link">Web hosting by Digital Ocean</a> | <a href="http://www.stackpath.com" rel="nofollow" class="sp-link">CDN by StackPath</a></span>
                </p>
            </div>

        </div>
    </footer>

    <script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-1076265-1']);
    _gaq.push(['_setDomainName', 'jqueryui.com']);
    _gaq.push(['_setAllowLinker', true]);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <script type='text/javascript' src='//jqueryui.com/wp-includes/js/comment-reply.min.js?ver=4.5.2'></script>
    <script type='text/javascript' src='//jqueryui.com/wp-includes/js/wp-embed.min.js?ver=4.5.2'></script>

</body>
</html>
